<template>
	<view class="ucenter-page">
		<u-navbar title-size="36" height="42" :border-bottom="false" title="我的佣金"></u-navbar>
		<view class="search-bar">
			<view class="search-inner">
				<image src="../../static/images/search-2.png" mode="" class="search-icon"></image>
				<input type="text" value="" v-model="search" placeholder="输入线索号" class="ui-input"
					placeholder-style="color:#9C9C9C;" @input="input" />
				<image src="../../static/images/clear.png" class="clear" mode="" v-if="clear" @click="inputClear"></image>
			</view>
		</view>
		<view class="dropdown-nav">
			<u-dropdown height="90" inactive-color="#606366" active-color="#A2C833" menu-icon="arrow-down-fill"
				menu-icon-size="0">
				<u-dropdown-item v-model="value1" title="2021.09" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="贡献筛选" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="佣金类型" :options="options3"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="content">
			<view class="total">
				<view class="total-item">合计20笔<text>¥20000</text></view>
				<view class="total-item">已提20笔<text>¥10000</text></view>
				<view class="total-item">待提10笔<text>¥10000</text></view>
			</view>
			<view class="u-cells">
				<view class="u-cell" v-for="(res, index) in list" :key="index">
					<view class="u-cell-hd">
						<u-checkbox @change="checkboxChange" v-model="res.checked" shape="circle" size="36"
							active-color="#303337"></u-checkbox>
					</view>
					<view class="u-cell-bd flex_bd">
						<view class="u-cell-top">
							<view class="u-cell-title flex_bd ellipsis">{{res.title}}</view>
							<view class="price">¥{{res.price}}</view>
						</view>
						<view class="u-cell-tags">
							<view class="tag" v-for="(item, index) in res.tags" :key="index">{{item}}</view>
						</view>
						<view class="u-cell-time">{{res.time}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20" width="92%">
			<view class="popup-content">
				<view class="popup-title">提现消息</view>
				<view class="popup-desc">抱歉，您的提现资料未完善，请点击下方“完善资料”补充相关信息</view>
				<view class="popup-btns">
					<view class="popup-btn-item flex_bd">
						<button type="default" class="btn">完善资料</button>
					</view>
					<view class="popup-btn-item flex_bd">
						<button type="default" class="btn btn-default" @click="show = false">暂不提现</button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show2" mode="center" border-radius="20" width="92%">
			<view class="popup-content">
				<view class="popup-title">提现消息</view>
				<view class="popup-tips">
					<text>提现金额</text>
					<text class="amount">2000元</text>
				</view>
				<view class="popup-btns">
					<view class="popup-btn-item flex_bd">
						<button type="default" class="btn">确认提现</button>
					</view>
					<view class="popup-btn-item flex_bd">
						<button type="default" class="btn btn-default" @click="show2 = false">暂不提现</button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="center" border-radius="20" width="92%">
			<view class="popup-content">
				<view class="popup-title">提现消息</view>
				<view class="popup-cells">
					<view class="popup-cell">
						<view class="popup-cell__hd">
							提现金额
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="amount">2000元</view>
						</view>
					</view>
					<view class="popup-cell">
						<view class="popup-cell__hd">
							到账银行卡
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-pick">
								<input type="text" value="" v-model="bank" placeholder="请选择" class="ui-input"
									placeholder-style="color:#BFBFBF;" @click="select"/>
								<image src="../../static/images/dw.png" class="arrow" mode=""></image>
							</view>
							<u-select v-model="show3" :list="pick" @confirm="confirm"></u-select>
							<view class="add">+ 新增银行卡</view>
						</view>
					</view>
				</view>
				<view class="popup-btns">
					<view class="popup-btn-item flex_bd">
						<button type="default" class="btn">确认提现</button>
					</view>
					<view class="popup-btn-item flex_bd">
						<button type="default" class="btn btn-default" @click="show1 = false">暂不提现</button>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="u-foot">
			<view class="u-fixed">
				<u-checkbox @change="checkedAll" v-model="checkAll" shape="circle" size="36" active-color="#303337">
					<text class="check-label">全选</text>
				</u-checkbox>
				<view class="btn-group">
					<button type="default" class="btn" @click="show = true">立即提现</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				value3: 3,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options3: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				list: [{
					checked: false,
					title: '线索 UB20091910  刘飞翔',
					price: 2000,
					tags: ['设备成交', 'ZE205E-10', 'LA010201'],
					time: '2021-05-19'
				}, {
					checked: false,
					title: '线索 UB20091019  西南建设公…',
					price: 2000,
					tags: ['累计成交额', '好友分红'],
					time: '2021-05-19'
				}, {
					checked: false,
					title: '线索 UB20091019  一次性奖励',
					price: 2000,
					tags: ['累计成交额', '好友分红'],
					time: '2021-05-19'
				}],
				checkAll: false,
				clear: false,
				search: '',
				show: false,
				show1: true,
				show2: true,
				show3: false,
				pick: [{
						value: '1',
						label: '工商银行'
					},
					{
						value: '2',
						label: '招商银行'
					}
				],
				bank:''
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			checkboxChange(e) {
				//console.log(e);
			},
			// 全选
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
				})
			},
			input() {
				this.clear = true
			},
			inputClear() {
				this.search = '';
				this.clear = false;
			},
			select(){
				this.show3 = true
			},
			confirm(e) {
				console.log(e);
				this.bank = e[0].label
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.search-bar {
		padding: 16rpx 32rpx 20rpx;
		background-color: #fff;

		.search-inner {
			position: relative;

			.search-icon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 32rpx;
				top: 50%;
				margin-top: -20rpx;
			}

			.ui-input {
				height: 72rpx;
				background-color: #F3F4F6;
				border-radius: 36rpx;
				padding-left: 80rpx;
				font-size: 28rpx;
			}

			.clear {
				width: 40rpx;
				height: 40rpx;
				display: block;
				position: absolute;
				right: 16rpx;
				top: 50%;
				margin-top: -20rpx;
				display: block;
				z-index: 11;
			}
		}
	}

	.dropdown-nav {
		background-color: #fff;

		/deep/ .u-dropdown__menu__item__arrow {
			width: 24rpx;
			height: 24rpx;
			background: url(../../static/images/down-arrow.png) no-repeat;
			background-size: contain;
		}
	}

	.content {
		padding: 32rpx;

		.total {
			display: flex;
			margin-left: -16rpx;
			margin-bottom: 32rpx;

			.total-item {
				font-size: 24rpx;
				color: #9C9C9C;
				padding: 0 16rpx;
				position: relative;

				text {
					color: #313A41;
					margin-left: 4rpx;
				}
			}

			.total-item:after {
				position: absolute;
				content: '';
				width: 2rpx;
				height: 16rpx;
				background: #CCCCCC;
				right: 0;
				top: 50%;
				margin-top: -8rpx;
			}

			.total-item:last-child::after {
				width: 0;
			}

		}
	}

	.u-cell {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		padding: 32rpx;

		.u-cell-hd {
			width: 36rpx;
			margin-right: 28rpx;
			overflow: hidden;
		}

		.u-cell-top {
			display: flex;
			align-items: center;

			.u-cell-title {
				font-size: 28rpx;
				color: #383842;
			}

			.price {
				font-size: 36rpx;
				color: #FE6714;
				margin-left: 60rpx;
			}
		}

		.u-cell-tags {
			margin-bottom: 20rpx;

			.tag {
				display: inline-block;
				font-size: 22rpx;
				color: #A2C833;
				border: 2rpx solid #A2C833;
				height: 36rpx;
				background: rgba(162, 200, 51, 0.08);
				padding: 0 8rpx;
				border-radius: 6rpx;
				line-height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.u-cell-time {
			font-size: 24rpx;
			color: #9C9C9C;
		}
	}


	.u-foot {
		.u-fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 20rpx 24rpx 20rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 11;
			background-color: #fff;
		}

		.check-label {
			font-size: 28rpx;
			color: #9C9C9C;
		}

		.btn-group {
			.btn {
				font-size: 32rpx;
				color: #fff;
				line-height: 80rpx;
				background-color: #A2C833;
				border-radius: 40rpx;
				width: 240rpx;
			}
		}
	}

	.popup-content {
		padding: 52rpx 70rpx 0;

		.popup-title {
			font-size: 40rpx;
			color: #303337;
			text-align: center;
			font-weight: 600;
			margin-bottom: 24rpx;
			line-height: 56rpx;
		}

		.popup-desc {
			font-size: 32rpx;
			color: #666666;
			text-align: center;
			line-height: 52rpx;
		}

		.popup-btns {
			padding: 48rpx 20rpx;
			display: flex;

			.popup-btn-item {
				padding: 0 16rpx;

				.btn {
					font-size: 32rpx;
					color: #fff;
					background-color: #A2C833;
					line-height: 80rpx;
					border-radius: 40rpx;
				}

				.btn-default {
					background-color: #ECEDED;
					color: #606366;
				}
			}
		}
	}

	.popup-cells {
		margin: -24rpx -10rpx 0;

		.popup-cell {
			display: flex;

			.popup-cell__hd {
				font-size: 32rpx;
				color: #666666;
				width: 170rpx;
				line-height: 96rpx;
			}

			.popup-cell__bd {
				.amount {
					font-size: 32rpx;
					color: #FE6714;
					line-height: 96rpx;
					margin-left: 32rpx;
				}

				.add {
					font-size: 24rpx;
					color: #666666;
					line-height: 2;
					margin-top: 16rpx;
				}

				.popup-pick {
					position: relative;

					.ui-input {
						height: 100rpx;
						border-radius: 12rpx;
						background-color: #F3F4F6;
						font-size: 32rpx;
						padding-left: 32rpx;
					}

					.arrow {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						right: 24rpx;
						top: 50%;
						margin-top: -14rpx;
					}
				}
			}
		}
	}
	
	.popup-tips{
		font-size: 32rpx;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 0;
		
		
		.amount{
			font-weight: 600;
			font-size: 40rpx;
			color: #FE6714;
			margin-left: 24rpx;
		}
	}
</style>
